<include file="Public/mheader" />
<style>
.background{
	width:100%;
	height:100%;
	background:#bbbbbb;
	position: relative;
}
.bottom-div{
	position:fixed;
	bottom:40px;
	width:100%;
	text-align:center;
	margin:0;
}
.bottom-button {
	
}
.map,.map>img{
	width:100%;
	height:100%;
}
.map{
	height:100%;
	overflow: hidden;
}
.point .m-block{
	position: absolute;
	width:30%;
}
.point .m-block .img img{
	width:100%;
}
.point .m-block.title{
	top:5%;
	left:25%;
	width:50%;
}
.point .m-block.city1{
	top:27%;
	left:15%;
}
.point .m-block.city2{
	top:30%;
	left:60%;
}
.point .m-block.city3{
	top:50%;
	left:50%;
}
.point .m-block.city4{
	top:65%;
	left:10%;
}
.my{
	position: absolute;
	bottom: 3%;
	width: 40%;
	left: 30%;
}
.my a.btn{
	width:100%;
	background:url(__PUBLIC__/__MODULE__/img/btn.png) no-repeat;
	background-size:100% 100%;
	color: #ffffff;
	border:none;
}
.m-block .disable-tip,.m-block .disable-name{
	text-decoration: none;
	color: #eee;
	text-align: center;
	display:none;
	margin-top:5px;
}
.point .m-block .disable-name img{
	width:70%;
}
.m-block.disable .disable-tip,.m-block .disable-name{
	display:block;
}
.m-block.disable img{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}
a:visited, a:hover {
    text-decoration: none;
}
</style>
<div class="background">
	<div class="map">
		<img src="__PUBLIC__/__MODULE__/img/answer-map-bg.jpg">
	</div>
	<div class="point">
		<div class="m-block title">
			<div class="img">
				<img src="__PUBLIC__/__MODULE__/img/title.png">
			</div>
		</div>
		
		<div class="m-block city1">
			<a href="javascript:void(0)" data-href='{:U("answer","point=1")}'>
				<div class="img">
					<img src="__PUBLIC__/__MODULE__/img/pengze.png">
					<div class="disable-name"><img src="__PUBLIC__/__MODULE__/img/pengze_btn.png"></div>
				</div>
			</a>
		</div>
		
		<div class="m-block city2 <empty name="fra[1]">disable</empty>" >
			<a href="javascript:void(0)" data-href='{:U("answer","point=2")}'>
				<div class="img">
					<img src="__PUBLIC__/__MODULE__/img/jiujiang.png">
					<div class="disable-name"><img src="__PUBLIC__/__MODULE__/img/jiujiang_btn.png"></div>
				</div>
			</a>
		</div>
		
		<div class="m-block city3 <empty name="fra[2]">disable</empty>">
			<a href="javascript:void(0)" data-href='{:U("answer","point=3")}'>
				<div class="img">
					<img src="__PUBLIC__/__MODULE__/img/xingzi.png">
					<div class="disable-name"><img src="__PUBLIC__/__MODULE__/img/xingzi_btn.png"></div>
				</div>
			</a>
		</div>
		
		<div class="m-block city4 <empty name="fra[3]">disable</empty>">
			<a href="javascript:void(0)" data-href='{:U("answer","point=4")}'>
				<div class="img">
					<img src="__PUBLIC__/__MODULE__/img/dean.png">
					<div class="disable-name"><img src="__PUBLIC__/__MODULE__/img/dean_btn.png"></div>
				</div>
			</a>
		</div>
	</div>
	<div class="my">
		<a class="btn btn-default" href="javascript:void(0)" data-href='{:U("help")}' role="button">活动规则</a>
		<a class="btn btn-default" href="javascript:void(0)" data-href='{:U("rank")}' role="button">英雄榜</a>
	</div>
</div>
<script>
$('a[data-href]').on('click',function(){
	location.href=$(this).data('href');
});
$('.background').on('click','div.disable>a',function(){
	return false;
});
</script>
<include file="public/footer" />